<template>
  <div class="dic-results por">
    <van-search @focus="showHistory" @blur="getDetails()" v-model="input" shape="round" background="#fff" show-action
                class="por search"
                :autofocus="autofocus"
                :class="{shadow: showHis}"
                @cancel="onCancel"></van-search>
    <div class="font-detail" v-if="detail.length">
      <div class="text">
        <div class="content dib vam tac" :class="{zh: activeRes !== 4}" v-for="(item, i) in detail[0].name" :key="i">
          {{item}}
        </div>
      </div>
      <div class="sound">
        <img class="vam sound-icon" src="../../images/dictionary/cidian_ico_voice.png" @click="$refs.audio.play()">
        <span class="sound-text">{{detail[0].sound}}</span>
        <audio ref="audio" :src="audio" class="h0 ovh p0 m0"></audio>
      </div>
      <div class="others" v-if="activeRes === 0 || activeRes === 1">
        <!--<div class="inner">笔顺：<span class="value">丶一丨丿乙</span></div>-->
        <div class="other">
          <div class="dib vam inner" v-for="(item, k) in fontDetail" :key="k">{{item}}：<span class="value">{{detail[0][k]}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- history -->
    <div class="history poa t0 l0 w100 zi100" :class="{active: showHis}">
      <van-cell v-for="item in dicHistory" :title="item.name" icon="clock-o" :value="tabStr[item.type]"
                :key="item.type"
                @click="getDetails(item)"
                value-class="history-right"/>
      <div v-show="dicHistory.length" class="clear tac" @click="setDicHistory(true)">清空历史记录</div>
    </div>

    <div class="results">
      <van-tabs sticky class="types" v-model="activeRes" :ellipsis="false" :line-width="28" color="#328eff">
        <van-tab v-for="item in tabs" :title="item.tab" :key="item.id"></van-tab>
      </van-tabs>
      <div class="tabs-content por" v-show="!showHis">
        <template v-if="detail.length">
          <div v-for="item in detail" class="detail-boxes">
            <div class="font-sound" v-if="activeRes === 0 || activeRes === 1">
              <span class="blue">{{item.name}}</span> / {{item.sound}} /
            </div>
            <div :class="{nm: !!activeRes}" class="item" v-for="(name, i) in detailList" :key="i + Math.random()"
                 v-if="item[i]">
              <div class="res-type-name">{{name}}</div>
              <div class="item-list wspl">{{item[i]}}</div>
            </div>
            <div class="item"
                 v-if="!activeRes && details[3][0] && (details[3][0]['synonymous'] || details[3][0]['synonym'] || details[3][0]['opposites'])">
              <div class="res-type-name">同近反义词</div>
              <div class="item-list wspl" v-if="details[3][0]['synonymous']">【同义词】 {{details[3][0]['synonymous']}}</div>
              <div class="item-list wspl" v-if="details[3][0]['synonym']">【近义词】 {{details[3][0]['synonym']}}</div>
              <div class="item-list wspl" v-if="details[3][0]['opposites']">【反义词】 {{details[3][0]['opposites']}}</div>
            </div>
          </div>
        </template>

        <div class="no-detail tac" v-else>
          <img src="../../images/dictionary/image_search_record_no.png">
          <div>未找到相关释义</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex';

  export default {
    name: "DicResults",
    data() {
      return {
        input: '',
        oldInput: '',
        audio: '',
        activeRes: '',
        autofocus: false,
        showHis: false,
        tabs: [
          {type: 7, tab: '小学生字典'},
          {type: 4, tab: '现代汉语'},
          {type: 6, tab: '中华成语'},
          {type: 1, tab: '汉英'},
          {type: 2, tab: '英汉'},
        ],
        tabStr: {
          7: '小学生字典',
          4: '现代汉语',
          6: '中华成语',
          1: '汉英',
          2: '英汉',
        },
        fontDetail: {
          'strokes': '笔画',
          'radicals': '部首',
          'formation': '造字法',
          'structure': '结构',
        },
        detail: [],
        details: {},
        detailList: {
          'interpret': '释义',
          'meaning': '字义',
          'acceptation': '词义',
          'discriminate': '辨析',
          'sound_co': '正音',
          'part': '词性',
          'usage': '用法',
          'sen_example': '例句',
          'from': '出自、语出',
          'interpret_en': '英译',
          'short': '短句',
          // 'five_stroke': '五笔',
          // 'initials': '首字母',
          // 'table_code': '表码字母',
          'related': '相关词',
          'phrases': '常用词组',
          'group_word': '组词',
          'derivative': '派生词',
          'reverse': '逆序',
          'resembling': '形似',
          'synonymous': '同义',
          'synonym': '近义',
          'opposites': '反义',
          'shape_co': '形状',
          'homophonic': '同音',
        },
      }
    },
    computed: {
      ...mapGetters([
        'dicHistory'
      ])
    },
    watch: {
      activeRes(val) {
        this.detail = this.details[this.tabs[val].type] || [];
        this.getAudio();
      },
    },
    created() {
      let type = this.$route.params.type * 1;
      this.tabs.map((e, i) => {
        e.type === type && (this.activeRes = i);
      });
      this.autofocus = true;
    },
    methods: {
      ...mapMutations([
        'setDicHistory'
      ]),
      onCancel() {
        this.$router.go(-1);
      },
      showHistory() {
        this.showHis = true;
      },
      getAudio() {
        if (!this.detail.length) return;
        this.http.$post('php/dictionary/dictionary.api/get_audio', {
          name: this.detail[0].name,
        }).then(res => {
          this.audio = res.url;
        }).catch(this.$err);
      },
      getDetails(item) {
        let {details, detail} = this;
        if (item) {
          this.input = item.name;
          this.tabs.map((e, i) => {
            if (e.type === item.type) this.activeRes = i;
          });
        }
        setTimeout(() => {
          this.showHis = false;
        }, 100);
        if (!this.input || this.input === this.oldInput) return;
        if (/^[a-z ]+$/i.test(this.input)) this.activeRes = 4;
        this.http.$post('php/dictionary/dictionary.api/dictionary_ainfo', {name: this.input}).then(res => {
          this.setDicHistory({name: this.input, type: this.tabs[this.activeRes].type});
          this.oldInput = this.input;
          details['other'] = [];
          res.list.map(e => {
            e.content.map(c => {
              Object.keys(c).map(d => {
                if (typeof c[d] === "string") {
                  c[d] = c[d].replace(/^(\\n|\s)*|(\\n|\s)*$/g, '').replace(/～/ig, name).replace(/\\n/ig, '\n');
                }
              });
            });
            switch (e.name) {
              case '小学生字典':
                details[7] = e.content;
                break;
              case '古汉语':
                details[5] = e.content;
                break;
              case '现代汉语':
                details[4] = e.content;
                break;
              case '中华成语':
                details[6] = e.content;
                break;
              case '汉英大词典':
                details[1] = e.content;
                break;
              case '英汉大词典':
                details[2] = e.content;
                break;
              case '同近反义':
                details[3] = e.content;
                break;
              default:
                details['other'].push(e.content);
            }
            return e;
          });
          this.detail = details[this.tabs[this.activeRes].type] || [];
          this.getAudio();
        }).catch(this.$err);
      }
    }
  }
</script>

<style scoped lang="less">
  .search {
    z-index: 101;
    &.shadow {
      box-shadow: 0 .09rem .31rem 0 rgba(0, 0, 0, .08);
    }
  }

  .blue {
    color: #328eff;
  }

  .history {
    transform: translateY(-100%);
    transition: transform .3s;
    &.active {
      top: 3.375rem;
      transform: translateY(0);
    }
    .clear {
      background-color: #fff;
      line-height: 2.75rem;
      font-size: .88rem;
      color: #999;
    }
    .history-right {
      span {
        padding: .22rem .66rem;
        display: inline-block;
        vertical-align: middle;
        background-color: #f3f4f7;
        color: #9fa6bb;
        font-size: .63rem;
        border-radius: 1rem;
      }
    }
  }

  .dic-results {
    background-color: #f5f5f5;
  }

  .font-detail {
    margin-bottom: .5rem;
    background-color: #fff;
    padding: .75rem 1rem;
    .content {
      line-height: 2.75rem;
      font-size: 1.88rem;
      color: #222;
      &.zh {
        + .zh {
          margin-left: -.06rem;
        }
        width: 2.75rem;
        line-height: 2.75rem;
        background: url(../../images/dictionary/cidian_bg_wenzi.png) no-repeat top left / 100% 100%;
      }
    }
    .sound {
      padding: 1.25rem 0 .75rem;
      .sound-text {
        line-height: 1.03rem;
        color: #b5b5b5;
        font-size: .88rem;
      }
      .sound-icon {
        width: 1rem;
        height: 1.03rem;
      }
    }
    .others {
      margin-left: -1.4rem;
      .inner {
        margin-left: 1.4rem;
        font-size: .88rem;
        line-height: 1.5rem;
        color: #b5b5b5;
        .value {
          color: #333;
        }
      }
    }
  }

  .results {
    .detail-boxes {
      + .detail-boxes {
        margin-top: .5rem;
      }
    }
    .font-sound {
      padding: 1rem 1rem .5rem;
      background-color: #fff;
      font-size: .88rem;
      line-height: 1;
      color: #666;
      .blue {
        font-size: 1.13rem;
      }
    }
    .item {
      margin-bottom: .5rem;
      padding: .5rem 1rem;
      background-color: #fff;
      color: #333;
      &.nm {
        margin-bottom: 0;
      }
      .res-type-name {
        font-size: .88rem;
        color: #959aa6;
      }
      .item-list {
        padding-left: .81rem;
      }
    }
  }

  .no-detail {
    background-color: #fff;
    padding-top: 6rem;
    color: #9fa6bb;
    img {
      width: 8.75rem;
      margin-bottom: 2.5rem;
    }
  }
</style>
